{{ define "main" }}
<div class="archive animated fadeInDown">
  
  <div class="list-with-title">
    <div class="listing-title">Categories✨✨</div>
    <div class="listing-category">
      {{ range .Data.Terms.ByCount }}
        <a class="category" href="/categories/{{ .Name | urlize }}">
          {{ .Name }}
        </a>
      {{ end }}
    </div>
    {{ range .Data.Terms.ByCount }}
      <div>
        <div class="listing-subTitle">
            {{ .Name }} ({{ .Pages | len }})
        </div>
        <ul class="listing">
          {{ range .Pages }}
            <div class="listing-item">
              <div class="listing-post">
                <div class="post-time">
                  <span class="date">{{.Date.Format "2006-01-02" }}</span>
                </div>
                <div class="post-name">
                  <a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}</a>
                </div>
              </div>
            </div>
          {{ end }}
        </ul>
      </div>
    {{ end }}
   
  </div>

</div>
{{ end }}